<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>图书列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4; /* 添加背景颜色 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            padding: 20px;
        }

        .personal-info {
            position: fixed;
            bottom: 10px;
            right: 10px;
            font-size: 14px;
            color: #555;
            background-color: #fff; /* 添加背景颜色，确保文字可读 */
            padding: 5px 10px; /* 添加内边距 */
            border-radius: 4px; /* 添加圆角 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }

        h1 {
            color: #333; /* 修改标题颜色 */
            margin-bottom: 20px; /* 添加底部间距 */
        }

        /* 新增的表格样式 */
        table {
            width: 80%; /* 修改表格宽度，以适应更多内容 */
            max-width: 1200px; /* 限制最大宽度，以确保在小屏幕上仍然可读 */
            border-collapse: collapse; /* 合并边框 */
            margin-top: 20px; /* 添加顶部间距 */
        }

        table, th, td {
            border: 1px solid #ddd; /* 修改边框颜色为浅灰色 */
        }

        th, td {
            padding: 12px; /* 增加内边距 */
            text-align: left;
            vertical-align: middle; /* 垂直居中对齐 */
        }

        th {
            background-color: #007bff; /* 修改表头背景颜色为蓝色 */
            color: #fff; /* 修改表头文字颜色为白色 */
        }

        tr:nth-child(even) {
            background-color: #f9f9f9; /* 添加条纹效果 */
        }

        tr:hover {
            background-color: #f1f1f1; /* 添加悬停效果 */
        }

        /* 表单样式 */
        form {
            display: flex; /* 使用flex布局，并默认为row方向 */
            align-items: center; /* 垂直方向居中对齐 */
            margin-bottom: 20px; /* 添加底部间距 */
        }

        form label {
            margin-right: 10px; /* 添加右侧间距以分隔标签和输入框 */
            font-weight: bold; /* 加粗文字 */
        }

        form input {
            padding: 8px; /* 添加内边距 */
            font-size: 16px; /* 修改字体大小 */
            border: 1px solid #ccc; /* 添加边框 */
            border-radius: 4px; /* 添加圆角 */
            flex: 1; /* 占据剩余空间，根据需要调整大小 */
            max-width: 300px; /* 限制最大宽度 */
        }

        form button {
            padding: 10px 20px; /* 添加内边距 */
            font-size: 16px; /* 修改字体大小 */
            border: none; /* 去除边框 */
            border-radius: 4px; /* 添加圆角 */
            background-color: #007bff; /* 修改背景颜色为蓝色 */
            color: #fff; /* 修改文字颜色为白色 */
            cursor: pointer; /* 添加鼠标指针样式 */
            margin-left: 10px; /* 添加左侧间距以分隔输入框和按钮 */
        }

        form button:hover {
            background-color: #0056b3; /* 修改悬停时的背景颜色 */
        }

        /* 功能选项样式 */
        .action-links {
            display: flex; /* 使用flex布局 */
            gap: 10px; /* 添加间距 */
        }

        .action-links a {
            text-decoration: none; /* 去除下划线 */
            color: #007bff; /* 修改链接颜色为蓝色 */
            padding: 5px 10px; /* 添加内边距 */
            border-radius: 4px; /* 添加圆角 */
        }

        .action-links a:hover {
            background-color: #007bff; /* 修改悬停时的背景颜色 */
            color: #fff; /* 修改悬停时的文字颜色为白色 */
        }
    </style>
</head>
<body>

<div class="personal-info">
    <p>谭星 202235020333</p>
</div>

<h1>图书列表</h1>

<!-- 查询图书的表单 -->
<form th:action="@{/books/search}" method="get">
    <label for="bookId">根据ID查询图书：</label>
    <input type="text" id="bookId" name="id" placeholder="输入图书ID">
    <button type="submit">查询</button>
</form>

<a href="/books/new" style="margin-top: 20px; display: inline-block; text-decoration: none; color: #007bff;">添加图书</a>

<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>状态</th>
        <th>功能选项</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="book : ${books}">
        <td th:text="${book.id}"></td>
        <td th:text="${book.name}"></td>
        <td th:text="${book.author}"></td>
        <td th:text="${book.press}"></td>
        <td th:text="${book.status}"></td>
        <td class="action-links">
            <a th:href="@{/books/{id}/edit(id=${book.id})}">编辑</a>
            <a th:href="@{/books/{id}/delete(id=${book.id})}">删除</a>
        </td>
    </tr>
    </tbody>
</table>

</body>
</html>